<nz-layout style="height: 100%">
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzCollapsedWidth]="0" [nzBreakpoint]="'lg'">
    <div class="logo">
    </div>
    <div style="height: 60px;display: flex; justify-content: center; align-items: center;">
      <h1 style="text-align: center; color: #FFF">xcms系统</h1>
    </div>
    <div style="text-align: center; color: #FFF">
      <h3 style="color: #FFF">管理员: {{ userName }}</h3>
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
      <li nz-menu-item [routerLink]="['home']" routerLinkActive="ant-menu-item-selected" ><span><i class="anticon anticon-home"></i><span class="nav-text">首页</span></span></li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header style="background: #fff; text-align: right;" >
      <button nz-button [nzType]="'primary'" [nzSize]="size" [routerLink]="['user']" (mouseover)="shouUser(1)" (mouseout)="shouUser(0)">
        <i class="anticon anticon-user"></i><span style="text-transform: capitalize;">{{ userName }}</span>
      </button>
      <div id="user" [hidden]="isHide" (mouseover)="shouUser(1)" (mouseout)="shouUser(0)">
        <div id="user-info" >
          <h1 style="text-transform: capitalize;">{{ userName }}</h1>
          <h2>1365442566@qq.com</h2>
          <nz-button-group [nzSize]="size">
            <button nz-button [nzType]="'default'" [routerLink]="['user']">
              <i class="anticon anticon-idcard"></i><span>账户信息</span>
            </button>
            <button nz-button [nzType]="'danger'" (click)="logout()">
              <span>退出</span><i class="anticon anticon-logout"></i>
            </button>
          </nz-button-group>
        </div>
      </div>
    </nz-header>
    <nz-content style="margin:24px 16px 0;">
      <router-outlet></router-outlet>   
    </nz-content>
    <nz-footer style="text-align: center;">©2018 By YeMiao</nz-footer>
  </nz-layout>
</nz-layout>